<template>
  <div class="else-detail">
    <div class="one" v-for="item,index in list" :key="index">
      <viewer><img :title="item.accessoryName" :src="item.accessoryUrl" alt="" v-show="filterType(item.accessoryName)===1"></viewer>
      <img :title="item.accessoryName" v-show="filterType(item.accessoryName)==2" src="../../../../public/img/video.png" alt="">
      <svg   v-show="filterType(item.accessoryName)!=1&&filterType(item.accessoryName)!=2" class="icon" aria-hidden="true" style="font-size:50px">
        <use :xlink:href="`#${filterType(item.accessoryName)}`"></use>
      </svg>
      <div class="desc">
        <h1 class="more" :title="item.accessoryName">{{item.accessoryName}}</h1>
        <p>{{dealSize(item.accessorySize)}}</p>
       <p> <a :href="item.accessoryUrl" target="_blank"><el-button size="small" type="text">预览</el-button></a></p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MailFile",
        props:['list'],
        methods:{
            //转换文件单位
            dealSize(size) {
                size = size.toString();
                if (size.indexOf('KB') != -1||size.indexOf('B') != -1||size.indexOf('MB') != -1
                ||size.indexOf('kb') != -1||size.indexOf('b') != -1||size.indexOf('mb') != -1) {
                    return size;
                }
                let result = parseInt(size / 1024);
                if (result > 1024) {
                    return parseInt(result / 1024) + 'M';
                }
                return result + 'KB';
            },
            //判断文件类型
            filterType(name) {
                name=name.toLowerCase();
                //截取类型
                let index = name.lastIndexOf(".");
                let fileName = "."+name.substr(index+1);
                let images = ['.jpg', '.jpeg', '.png','.gif'];
                let videos = ['.avi', '.mp4', '.wav', '.rm', '.rmvb', '.mov', '.dat', '.wmv', '.3gp', '.amv', '.dmv', '.flv'];
                let files = ['.ppt','.pptx', '.pdf', '.doc', '.psd', '.txt','.xls','.xlsx','.eml'];
                //图片判断
                if (images.includes(fileName)) {
                    return 1
                }else if (videos.includes(fileName)) {
                    return 2
                }else if (files.includes(fileName)) {
                    switch (fileName) {
                        case '.ppt':
                            return 'icon-ppt';
                        case '.pptx':
                            return 'icon-ppt';
                        case '.pdf':
                            return 'icon-pdf'
                        case '.doc':
                            return 'icon-doc'
                        case '.psd':
                            return 'icon-psd'
                        case '.txt':
                            return 'icon-txt'
                        case '.xlsx':
                            return 'icon-xlsx'
                        case '.xls':
                            return 'icon-xlsx'
                        case '.eml':
                            return 'icon-EML'
                        default:
                            return 'icon-folder'
                    }
                }else{
                    return 'icon-doc'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .else-detail{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .one{
      display: flex;
      margin-right: 4%;
      img{
        width: 66px;
        height: 66px;
        border-radius: 5px;
        margin-right: 10px;
      }
      .desc{
        margin-left: 2.5px;
        h1{
          width: 62px;
          font-size: 14px;
          color: #000;
          line-height: 20px;
        }
        p{
          font-size: 13px;
          line-height: 20px;
        }
        .el-button--text {
          color: #409EFF;
          background: 0 0;
          border-bottom: 1px solid #409EFF;
          border-radius: 0;
          padding: 3px 0;
        }
      }
    }
  }
</style>
